<template>
	<view class="scale">
		<p-navbar title="参数" ></p-navbar>
		<view class="form" v-for="(item,index) in props" :key="index">
			<view class="form-title">{{item.name}}</view>
			<view class="form-center">
				<input type="text" placeholder="加仓数量"  v-model="form[item.key]"/>
				<view class="bill" >
					|<text style="padding-left: 20rpx;">USDT</text>
				</view>
			</view>
		</view>
		<view class="slider-data">
			<view class="slider-data">
				<view class="slider1">获取均价:</view>
				<view class="slider2">{{pinter(value)}}</view>
			</view>
			<view class="sliders" @tap="input">
				计算
			</view>
		</view>

		<view class="submit">
			<view class="submit-text">
				可用{{pinter(userinfo.myMoney.balance)}}USDT
			</view>
			<u-button type="primary" ripple shape="circle" :disabled="disabled" :loading="loading" @click="fnRegister">加 仓</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value:0,//滑块动态值
				loading: false, // 注册加载中
				props:[
					{
						key:'number',
						name:'加仓金额'
					}
				],
				form:{},
				styles:{
					"color":'#1677FF'
				},
				type:''//订单号
			};
		},
		computed: {
			// 注册按钮是否禁止点击
			disabled() {
				for (let i = 0; i < this.mustNode.length; i++) {
					const ele = this.mustNode[i]
					if (!this.form[ele.key]) return true
				}
				return false;
			},
			// 必填的节点信息
			mustNode() {
				return this.props
			},
			pinter(){
				return t=>{
					if(!t) return '0.0000'
					return Number(t).toFixed(4)
				}
			},
			userinfo(){//用户信息
				return this.$state.userinfo
			},
		},
		onLoad() {
			console.log(JSON.parse(this.$Route.query.type).orderCode)
			this.type=JSON.parse(this.$Route.query.type).orderCode//订单号
		},
		methods:{
			input(){//获取均价
				if(!this.form.number) return this.util.toast('加仓数量不能为空')
				uni.showLoading()
				this.request(`order/getPositionPrice?orderCode=${this.type}&price=${this.form.number}`,{
					orderCode:this.type,//订单号
					price:this.form.number//价格
				}).then(res=>{
					uni.hideLoading()
					this.value=res.data.data
				})
			},
			fnRegister(){//确定 一键加仓
				if(this.form.number<10) return this.util.toast('加仓数量不能小于10')
				this.loading=true
				this.request(`order/bargainingChip?orderCode=${this.type}&price=${this.form.number}`,{
					orderCode:this.type,//订单号
					price:this.form.number//价格
				}).then(res=>{
					if(res.data.code=='1'){
						this.util.toast('加仓成功','success')
						this.loading=false
						setTimeout(() => {
							this.$Router.push({
								path: '/pages/transaction/transaction'
							})
						}, 1500)
					}
				})
			},
			end(e){//滑块结束
				console.log(this.value)
			}
		}
	}
</script>

<style lang="scss">
	.scale{
		padding: 40rpx;
	}
	.form{
		margin-bottom: 30rpx;
	}
.form-title{
	line-height: 60rpx;
	margin-top: 15rpx;
	margin-bottom: 15rpx;
	@include flex;
	image{
		width: 25rpx;
		height: 25rpx;
		margin-left: 10rpx;
	}
}
.form-center{
	@include flex;
	width: 100%;
	justify-content: space-between;
	background-color: $color-bg;
	line-height: 85rpx;
	border-radius: 16rpx;
	padding: 0rpx 40rpx;
	
	input{
		width: 85%;
		height: 80rpx;
	}
	.bill{
		width: 15%;
		text-align: right;
	}
}
.submit {
		margin: 80rpx 0rpx 50rpx;
		.submit-text{
			text-align: right;
			font-size: 24rpx;
			line-height: 50rpx;
			color: $color-fu;
		}
		/deep/ .u-btn {
			background-color: $light-color;
			transition: .3s;
			height: 90rpx;
			border-radius: 20rpx;
			&[disabled] {
				box-shadow: none !important;
				background-color: #D7D7D7 !important;
			}
		}
		/deep/ .u-round-circle::after {
			border-radius: 20rpx;
		}
	}
	.slider-data{
		@include flex;
		justify-content: space-between;
		// padding-top: 20rpx;
		color: $color-fu;
		font-size: 26rpx;
		.slider2{
			color: $light-color;
			font-size: 30rpx;
			padding-left: 10rpx;
		}
		.sliders{
			color: $light-color;
			font-size: 30rpx;
		}
	}
</style>
